<template>
  <div class="login-main" :style="styles">
    <!-- <Row class="title-top mb-20">
      <span>欢迎</span>
    </Row>-->
    <Row class="logo-box">
      <Form :model="addForm" ref="addForm" :rules="validate" :label-width="120">
        <FormItem prop="username">
          <Input v-model="addForm.username" placeholder="请输入用户名">
            <Icon type="ios-contact" slot="prefix" :size="30" />
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="addForm.password" placeholder="请输入密码">
            <Icon type="md-lock" slot="prefix" :size="30" />
          </Input>
        </FormItem>
        <FormItem>
          <!--校验组件 -->
          <SliderDrag v-model="sliderdrag" @change="onSuccess" />
        </FormItem>
        <FormItem style="margin-bottom: 8px">
          <Button
            type="primary"
            shape="circle"
            @click="login"
            :loading="submitting"
            long
            style="font-size: 15px;"
            >登录</Button
          >
        </FormItem>
      </Form>
    </Row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import { Tools } from "@/model/tools.ts";
import { LoginParams, UserInfo, Token } from "@/store/interface";
import { LoginApi } from "@/api/service.js";
import { USER_INFO, SET_TOKEN } from "@/store/types.ts";
@Component
export default class Login extends Tools {
  //通过ref属性，调用子组件方法，传递数据；通过props传递父组件数据和事件，或者通过$emit和$on实现事件传递著作权归作者所有。
  public $refs!: {
    addForm: any;
  };
  private imgBg: string = require("@assets/img/login.jpg");
  private submitting: boolean = false;
  private sliderdrag: boolean = false; //滑块校验
  private addForm: LoginParams = {
    username: "",
    password: ""
  };

  private get styles(): object {
    return {
      backgroundImage: `url(${this.imgBg})`,
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center"
    };
  }

  /**
   * 校验
   */
  private get validate() {
    return {
      username: [{ required: true, message: "请输入登录名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }]
    };
  }

  private get params(): object {
    return this.addForm;
  }

  @Mutation
  private USER_INFO!: (param: {}) => UserInfo;
  @Mutation
  private SET_TOKEN!: (param: {}) => Token;

  private onSuccess() {
    setTimeout(() => {
      //this.handelSumit()
      this.$Message.success("验证通过");
    }, 100);
  }

  private login() {
    let vm = this;
    vm.$refs.addForm.validate(valid => {
      if (valid) {
        if (!this.sliderdrag) {
          this.$Message.error("请进行滑动验证");
          return;
        }
        vm.submitting = true;
        vm.submitData()
          .then(res => {
            vm.submitting = false;
            const [err, data] = res;
            if (err) {
              let msg = err.message || "登录失败";
              vm.$Message.error(msg);
              return;
            }
            if (!data) return;
            //保存到token信息中 vuex-persistedstate
            //原理：1.将vuex的state存在localStorage或sessionStorage或cookie中一份
            //      2.刷新页面的一瞬间，vuex数据消失，vuex回去sessionStorage中哪会数据，变相的实现了数据刷新不丢失~
            vm.SET_TOKEN(data.rows.token);
            //用户信息通过mutations保存到state中
            vm.USER_INFO(data.rows.user);
            vm.$router.replace("/index"); //跳转到首页
          })
          .catch(err => {
            this.$Message.error(err);
          });
      }
    });
  }

  async submitData(): Promise<any> {
    let vm = this;
    return await LoginApi(this.params);
  }
}
</script>
<style lang="stylus" scoped>
>>>.ivu-form .ivu-form-item-label {
  color: #7099f3f2
}
.login-main {
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  position: absolute
  min-height: 100vh
  overflow: hidden
  .title-top {
    box-sizing: border-box
    font-size: 16px
    color: $base-color
    font-weight: 600
  }
  .logo-box {
    width: 420px
    height: 370px
    padding: 35px
    color: #EEE
    position: absolute
    left: 50%
    top: 50%
    margin-left: -175px
    margin-top: -185px
  }
}
</style>
